<template>
  <el-dialog
    title="新增/修改"
    :visible="showDialog"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <el-form ref="form" label-width="160px" :model="queryData" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="queryData.username"
          placeholder="请输入用户名"
          style="width: 400px"
          size="small"
        />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input
          v-model="queryData.mobile"
          placeholder="请输入手机号"
          style="width: 400px"
          size="small"
        />
      </el-form-item>
      <el-form-item label="密码" :prop="passwordRules">
        <el-input
          v-model="queryData.password"
          :placeholder="passwordShow"
          style="width: 400px"
          size="small"
        />
      </el-form-item>
      <el-form-item label="性别">
        <span :class="queryData.sex === 0 ? 'color' : ''">女</span>
        <el-switch
          v-model="queryData.sex"
          :active-value="1"
          :inactive-value="0"
          active-color="#13ce66"
        />
        <span :class="queryData.sex === 1 ? 'color' : ''">男</span>
      </el-form-item>
      <el-form-item label="头像上传">
        <upload-img ref="uploadImg">
          <el-button size="small" type="primary">点击上传</el-button>
        </upload-img>
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        <el-button size="small" @click="closeDialog">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
import { addUserInfoApi, getUserInfoDetailApi, editUserInfoApi } from '@/api/vip/user'
export default {
  name: 'UserDialog',
  data() {
    return {
      showDialog: false,
      // 请求参数
      queryData: {
        icon: '',
        mobile: '',
        password: '',
        sex: 0,
        username: ''
      },
      rules: {
        username: [{ required: true, message: '请输入', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入', trigger: 'blur' }],
        password: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  computed: {
    passwordShow() {
      return this.queryData.id ? '留空表示不修改' : '请输入密码'
    },
    passwordRules() {
      return this.queryData.id ? '' : 'password'
    }
  },
  methods: {
    // 关闭dialog
    closeDialog() {
      this.showDialog = false
      this.queryData = {
        icon: '',
        mobile: '',
        password: '',
        sex: 0,
        username: ''
      }
      this.$refs.form.resetFields()
    },
    // 提交表单
    async btnOK() {
      const icon = this.$refs.uploadImg.fileList[0].realtiveUrl
      try {
        await this.$refs.form.validate()
      } catch (error) {
        return console.log(error)
      }
      // 判断是否有id 有就是修改
      if (this.queryData.id) {
        await editUserInfoApi({ ...this.queryData, icon })
        this.$message.success('修改成功')
      } else {
        await addUserInfoApi(this.queryData)
        this.$message.success('添加成功')
      }
      this.closeDialog()
      this.$emit('updata')
    },
    // 详情回显
    async getUserInfoDetail(id) {
      this.showDialog = true
      const { data: res } = await getUserInfoDetailApi(id)
      this.queryData = res
      if (res.icon) {
        this.$refs.uploadImg.fileList = [{
          url: 'http://124.223.14.236:8060/' + res.icon,
          realtiveUrl: res.icon
        }]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.color {
  color: #409eff;
}
.el-switch {
  margin: 0 20px;
}
</style>
